<template>
  <div class="main-container">
    <div>
      <h2>订单列表</h2>
    </div>
    <div class="search-container">
      <el-date-picker
          class="searchTime"
          v-model="searchTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始"
          unlink-panels
          end-placeholder="结束"
          :default-time="defaultTime1"
      />
      <el-input class="search-input" v-model="searchOrderNo" style="width: 160px" placeholder="请输入订单号" />
      <el-button class="search-btn" type="primary" @click="searchBtn" ><span>查询</span></el-button>
      <el-button class="search-btn"  type="primary" @click="resetBtn" ><span>重置</span></el-button>
      <br>
    </div>
    <div>
      <el-table :data="orderList" border style="width: 100%">
        <el-table-column prop="orderNo" label="订单号" width="180" align="center" />
        <el-table-column prop="username" label="用户" width="180" align="center" />
        <el-table-column prop="deskNum" label="桌号" width="180" align="center" />
        <el-table-column prop="orderStatus" label="订单状态" width="180" align="center" :formatter="orderStatusFun"/>
        <el-table-column prop="totalAmount" label="金额" width="180" align="center"  />
        <el-table-column prop="orderTime" label="订单时间" width="180" align="center"  />
        <el-table-column prop="remark" label="备注" align="center"  />
      </el-table>
      <el-pagination
          background
          :page-sizes="[10, 20, 30, 50]"
          v-model:page-size="pageSize"
          v-model:current-page="currentPage"
          @update:current-page="currentPageBtn"
          @update:page-size="pageSizeBtn"
          layout="sizes, prev, pager, next" :total="total" />
    </div>
  </div>
</template>

<script setup>

import {getCurrentInstance, onMounted, reactive, toRefs} from "vue";

const {proxy} = getCurrentInstance();

const tableData = reactive({
  orderList:[],
  currentPage: 1,
  pageSize: 10,
  total: 0,
  searchOrderNo: '',
  searchTime: [],
})

const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0) // '12:00:00'

const searchBtn = ()=> {
  orderListPage();
  tableData.searchOrderNo = ''
  tableData.searchTime=[]
}

const resetBtn = ()=> {
  tableData.searchOrderNo = ''
  tableData.searchTime=[]
  orderListPage();
}

onMounted(()=>{
  orderListPage();
})

const orderListPage = async () => {
  try {
    const obj = {
      pageSize: tableData.pageSize,
      currentPage: tableData.currentPage,
      orderNo: tableData.searchOrderNo,
      startTime: tableData.searchTime[0],
      endTime: tableData.searchTime[1]
    };
    const uri = proxy.$urls.m().orderPage
    const res = await new proxy.$request(uri, obj).modepost()

    tableData.total = res.data.data.total
    tableData.orderList = res.data.data.records
  } catch (e) {
    console.log(e)
    new proxy.$tips('token已过期', 'error').msgBox()
  }
}

const currentPageBtn = (e) => {
  tableData.currentPage = e
  orderListPage()
}

const pageSizeBtn = (e) => {
  tableData.pageSize = e
  tableData.currentPage = 1
  orderListPage()
}

/**
 * @description:用户状态切换
 * @param {*}
 * @return {*}
 */
const orderStatusFun = (val) => {
  if (val.orderStatus === undefined) return;
  else if(val.orderStatus === 1) {
    return '已结账';
  } else if (val.orderStatus === 0) {
    return '未结账';
  } else {
    return '赊账';
  }
};

const { orderList, currentPage, pageSize, total, searchOrderNo, searchTime } = toRefs(tableData);
</script>

<style scoped>
.searchTime,
.search-input,
.search-btn {
  margin: 10px;
}
</style>